<template>
  <el-dialog
    title="课程详情"
    :visible.sync="visible"
    :width="detailDialogWidth"
    :before-close="handleClose"
  >
    <div v-if="classInfo" class="class-detail">
      <div class="detail-header">
        <h3>{{ classInfo.courseName }}</h3>
        <el-tag 
          :type="getStatusTagType(classInfo.status)"
        >
          {{ classInfo.status }}
        </el-tag>
      </div>
      
      <div class="detail-info">
        <div class="info-row">
          <div class="info-item">
            <span class="label">课程类型：</span>
            <span class="value">{{ classInfo.courseType }}</span>
          </div>
          <div class="info-item">
            <span class="label">授课老师：</span>
            <span class="value">{{ classInfo.teacher }}</span>
          </div>
        </div>
        
        <div class="info-row">
          <div class="info-item">
            <span class="label">日期：</span>
            <span class="value">{{ classInfo.date }}</span>
          </div>
          <div class="info-item">
            <span class="label">时间：</span>
            <span class="value">{{ classInfo.startTime }} - {{ classInfo.endTime }}</span>
          </div>
        </div>
        
        <div class="info-row">
          <div class="info-item full-width">
            <span class="label">地点：</span>
            <span class="value">{{ classInfo.location }}</span>
          </div>
        </div>
        
        <div class="info-row">
          <div class="info-item full-width">
            <span class="label">课程内容：</span>
            <p class="value">{{ classInfo.content }}</p>
          </div>
        </div>
        
        <div class="info-row">
          <div class="info-item">
            <span class="label">评分：</span>
            <div class="value score-stars">
              <i 
                class="fas fa-star" 
                v-for="n in 5" 
                :key="n"
                :class="{ 'filled': n <= classInfo.score }"
              ></i>
            </div>
          </div>
          <div class="info-item">
            <span class="label">学生人数：</span>
            <span class="value">{{ classInfo.studentCount }}</span>
          </div>
        </div>
        
        <div class="info-row" v-if="classInfo.notes">
          <div class="info-item full-width">
            <span class="label">备注：</span>
            <p class="value">{{ classInfo.notes }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button 
        type="primary" 
        @click="handleExport"
      >
        <i class="fas fa-download"></i> 导出记录
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ClassDetailDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    classInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      detailDialogWidth: '600px'
    };
  },
  methods: {
    // 根据状态获取标签类型
    getStatusTagType(status) {
      switch (status) {
        case '已完成':
          return 'success';
        case '已取消':
          return 'danger';
        case '迟到':
          return 'warning';
        case '早退':
          return 'info';
        default:
          return 'default';
      }
    },
    
    // 关闭对话框
    handleClose() {
      this.$emit('close');
    },
    
    // 导出课程记录
    handleExport() {
      this.$emit('export-record', this.classInfo);
    }
  }
};
</script>

<style scoped>
.class-detail {
  padding: 10px 0;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.detail-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.detail-info {
  font-size: 14px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.info-item {
  flex: 1;
  min-width: 50%;
  box-sizing: border-box;
  padding-right: 16px;
}

.info-item.full-width {
  min-width: 100%;
}

.label {
  color: #6b7280;
  display: inline-block;
  width: 80px;
}

.value {
  color: #1f2329;
  line-height: 1.5;
}

/* 评分星星 */
.score-stars {
  color: #ddd;
  font-size: 14px;
  display: inline-block;
}

.score-stars .filled {
  color: #e6a23c;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .info-item {
    min-width: 100%;
    margin-bottom: 10px;
  }
  
  .detailDialogWidth {
    width: 90% !important;
  }
}
</style>
